<template>
  <div class="root-container">
    <h1 id="page-title">单框架设备操作</h1>

    <div class="device-list">
      <label 
        class="device-label"
        v-for="device in devices"
        :key="device.SN"
      >
        <input 
          type="radio" 
          name="city" 
          v-model="selectedDevice" 
          :value="device.SN"
        >
        {{ device.type }}: {{device.SN}}
      </label>
      <p>当前选中：{{ getSelectedDevice }}</p>
    </div>

    <!-- 输入框 -->
    <div class="display-field">
      <pre v-if="logContent">{{ logContent }}</pre>
      <pre v-else class="placeholder-text">相应操作的返回结果将显示在这里...</pre>
    </div>

    <div class="button-group">
      <button v-for="deviceOp in deviceOps" class="btn" @click="ControlDevice(deviceOp.op)"> {{deviceOp.name}} </button>
    </div>

    <div class="op-field">
      <label>源</label>
      <input type="text" v-model="inputValue" placeholder="请输入动态库源路径" class="input-field"/>
      <label>Dst</label>
      <input type="text" v-model="inputValue" placeholder="请输入动态库目标路径" class="input-field"/>
      <button class="btn" @click="PushDylib"> 推包 </button>
    </div>

    <input type="text" v-model="inputValue" placeholder="请输入要执行的指令或者脚本..." class="input-field"/>
    
    <!-- 按钮组 -->
    <div class="button-group">
      <button class="btn" @click="PushDylib"> 推包 </button>
      <button class="btn" @click="CopyFile"> 拷贝文件 </button>
      <button class="btn" @click="RunCmd"> 执行指令 </button>
      <button class="btn" @click="RunScript"> 执行脚本 </button>
      <button class="btn" @click="ClearLog"> 清除 </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted, onMounted } from 'vue';
import WebClient from '../utils/web_client';

// 设备选择区域
const devices = ref([
  { SN: '9CN0224A09018911', type: 'ALN' },
  { SN: '9CN0224A09018912', type: 'PLR' },
  { SN: '9CN0224A09018913', type: 'LMR' },
  { SN: '9CN0224A09018914', type: 'NOH' }
]);
const selectedDevice = ref('9CN0224A09018912');

const getSelectedDevice = computed(() => {
  const selected = devices.value.find(device => device.SN === selectedDevice.value);
  return selected ? selected.SN : '未选择';
});

// 日志回显区域
const logContent = ref('');
const PrintLog = (data: string, newline: boolean = true) => {
    if (logContent.value.length != 0 && newline) {
        logContent.value += "\n" + data;
    } else {
        logContent.value += data;
    }
}

const ClearLog = () => {
    logContent.value = '';
}

// 设备操作
const deviceOps = ref([
  { name: "重启", op: "RestartDevice"},
  { name: "切换Build开关", op: "SwitchBuild"},
]);

const ControlDevice = (cmd: string) => {
  if (cmd === "RestartDevice") {
    PrintLog("重启设备");
  } else if (cmd === "SwitchBuild") {
    PrintLog("切换Build开关");
  }
}


// 输入框的值
const inputValue = ref('');

let webClient: WebClient | null = null;
onMounted(()=>{
  webClient = new WebClient('localhost', 3000);
  webClient.Connect();
})
onUnmounted(()=>{
  webClient?.Disconnect();
  webClient = null;
})

const PushDylib = () => {
    const info = "PushDylib"
    PrintLog(info);
    webClient?.Send({type: "PushDylib", params: JSON.stringify(info)}).then((msg)=>{
        PrintLog(`PushDylib: ${JSON.stringify(msg)}`, true);
    });
};
const CopyFile = () => {
    const info = "CopyFile"
    webClient?.Send({type: "CopyFile", params: JSON.stringify(info)}).then((msg)=>{
        PrintLog(`CopyFile: ${JSON.stringify(msg)}`);
    });
};
const RunCmd = () => {
    const cmd = inputValue.value;
    webClient?.Send({type: "RunCmd", params: cmd}).then((msg)=>{
        PrintLog(`RunCmd: ${JSON.stringify(msg)}`);
    });
};
const RunScript = () => {
    const script = inputValue.value;
    webClient?.Send({type: "RunScript", params: script}).then((msg)=>{
        PrintLog(`RunScript: ${JSON.stringify(msg)}`);
    });
};
</script>

<style scoped>
/* 最外层根容器 */
.root-container {
  width: auto;
  padding-top: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 居中标题 */
h1 {
  color: #333;
  text-align: center;
  margin: 10px;
  font-size: 2em;
  font-weight: bolder;
}

/* 设备可选列表 */
.device-list {
  padding: 10px;
}
.device-label {
  display: inline-block;
  margin-right: 25px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

.device-label input[type="radio"] {
  margin-right: 6px;
  accent-color: #42b983;
}

/* 日志显示区域 */
.display-field {
  min-height: 640px;
  max-height: 800px;
  margin: 5px;
  padding: 10px;
  background-color:#fbf8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  color: #333;
}

.placeholder-text {
  color: #999;
  font-style: italic;
}

/* Others */
.input-field {
  width: 40%;
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.input-field:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

/* .button-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
} */
/* 
.btn {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  flex: 1;
}

.submit-btn {
  background-color:blue;
}

.submit-btn:hover {
  background-color:cadetblue;
} */

.button-group {
  padding: 10px 20px;
}

/* 核心：inline-block 确保并排，margin-right 控制间距 */
.btn {
  padding: 8px 16px;
  margin-right: 10px;
  width: 200px;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 去掉最后一个按钮的右边距（可选，更美观） */
.btn:last-child {
  margin-right: 0;
}

.btn:hover {
  background-color: #359469;
}
</style>